import React, { useRef } from 'react';
import type { ProFormInstance } from '@ant-design/pro-form';
import ProForm, { ProFormText } from '@ant-design/pro-form';
import { AddTenantRoleBean } from '../data';
import { Modal } from 'antd';

interface AddFormProps {
  onSubmit: (values: AddTenantRoleBean) => Promise<void>;
  onCancel: (flag?: boolean) => void;
  modalVisible: boolean;
  visibleHandler: (flag?: boolean) => void;
}

const AddForm: React.FC<AddFormProps> = (props) => {
  const formRef = useRef<ProFormInstance>();
  const { onSubmit: handleAdd,
    onCancel: handleAddModalVisible,
    modalVisible: addModalVisible,
  } = props;


  return (
    <Modal
      title="添加客户角色"
      open={addModalVisible}
      width={550}
      footer={null}
      centered
      onCancel={() => handleAddModalVisible(false)}
      afterClose={() => handleAddModalVisible(false)}
    >
      <ProForm<AddTenantRoleBean>
        onFinish={(values) => handleAdd(values)}
        formRef={formRef}
        layout="vertical"
      >
        <ProFormText
          width={'xl'}
          name="name"
          label="名称"
          placeholder="请输入"
          rules={[{ required: true, message: '请输入路段名称' }]}
        />
      </ProForm>
    </Modal>
  );
};
export default AddForm;
